<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar leftText="返回" :safeAreaInsetTop="true" :bgColor="navbartag ? '#fff': 'rgba(0,0,0,0)' ">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" :color="navbartag ? '#000': '#fff'" @tap="goBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"
					:color="navbartag ? '#000': '#fff'"></u-line>
				<u-icon name="home" size="20" :color="navbartag ? '#000': '#fff'" @tap="goHome"></u-icon>
			</view>
		</u-navbar>

		<!-- 顶部毛玻璃背景图 -->
		<!-- 可选值 xs s m l xl -->
		<pic-blur :params="{
				        width:'750rpx',
				        height:'520rpx',
				        image: newInfo.cover,
				        blur:'xs'
		}"></pic-blur>
		<view class="model">
			<!-- 标题 -->
			<view class="mtitle">{{newInfo.title}}</view>
			<view class="info-user">
				<view class="info">
					<text>{{ newInfo.author }} {{ newInfo.created_at | timeFormate }} 发布
						{{ newInfo.views_count }}阅读</text>
				</view>
			</view>
		</view>

		<view class="info-content">
			<mp-html :content="newInfo.content"></mp-html>
		</view>

		<!-- 资讯详情 -->
		<view class="info-content">
			<html-parse :content="newInfo.content" />
		</view>

		<!-- 作者信息 -->
		<view class="info-header">
			<text class="send">{{ newInfo.created_at | timeFormate }}发布 </text>
			<text>{{ newInfo.views_count }}阅读</text>
		</view>

		<view class="line" />
		<comment :oneInfo="newInfo" type="info" />
	</view>
</template>

<script>
	import {
		getNewInfo
	} from "../../common/api.js"
	import picBlur from "../../components/helang-blur/helang-blur.vue"
	import timeFrom from "../../tools/timeFrom.js"
	import mpHtml from "../../uni_modules/mp-html/components/mp-html/mp-html.vue"
	// 引入 评论插件
	import comment from '@/components/comment/comment.vue'
	export default {
		data() {
			return {
				// 当前动态详情
				newInfo: {},
				// 自定义  navbar 显示控制
				navbartag: false
			}
		},
		components: {
			picBlur,
			mpHtml,
			comment
		},
		async onLoad(options) {
			// #ifdef MP-WEIXIN
			// 微信条件下分享到朋友圈、群组
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			let res = await getNewInfo(options);

			let cp = res.content.replace(/@!\[.*\]\((\d*)\)/g, "<img src='" + this.BaseFileURL + '$1' + "' />")
			// 匹配检索换行符号，实现换行目标
			cp = cp.replace(/\s\D\s/g, "<p class='ptag'></p>")

			this.newInfo = {
				...res,
				cutTitle: res.title.length > 11 ? res.title.substring(0, 11) + "..." : res.title,
				cover: this.BaseFileURL + res.image.id,
				userId: res.user_id,
				content: cp,
				views_count: res.hits
			}
			console.log(this.newInfo);
		},
		methods: {
			// 跳转回上一步
			goBack() {
				uni.navigateBack()
			},
			// 跳转回首页
			goHome() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
		},
		filters: {
			timeFormate(timeDate) {
				let Time = new Date(timeDate);
				let timestemp = Time.getTime();
				let t = timeFrom(timestemp, "yyyy年mm月dd日");
				return t;
			},
		},
		onPageScroll(e) {
			console.log(e);
			if (e.scrollTop > 100) {
				this.navbartag = true;
			} else {
				this.navbartag = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hicon {
		height: 36upx;
		width: 36upx;
		padding-left: 30upx;
		padding-top: 10upx;
	}

	.model {
		width: 750upx;
		height: 520upx;
		position: absolute;
		background-color: rgba($color: #364161, $alpha: 0.2);
		z-index: 1;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-end;

		.mtitle {
			margin-top: 20upx;
			width: 700upx;
			margin-left: 25upx;
			font-size: 44upx;
			color: #fff;
			line-height: 64upx;
		}


		.info-user {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-top: 30upx;
			margin-left: 5upx;
			margin-bottom: 30upx;

			.info {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: left;
				margin-left: 20upx;
				font-size: 24upx;
				font-weight: bolder;
				color: #fff;
			}
		}
	}


	.info-content {
		width: 680upx;
		text-align: left;
		margin-top: 80upx;
		// #ifdef MP-WEIXIN
		margin-left: 35upx;
		// #endif
		// #ifndef MP-WEIXIN
		margin-left: 0;
		// #endif
	}

	.info-header {
		margin-top: 10upx;
		margin-left: 25upx;
		padding-bottom: 20upx;
		color: #999;
		font-size: 22upx;

		.send {
			margin-right: 20upx;
		}
	}

	.line {
		height: 30upx;
		width: 750upx;
		background-color: #f3f3f3;
	}
</style>
